<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <!-- 引入Vue -->
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>账号信息</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form ref="userForm" :model="userForm" :rules="rules" label-width="200px">
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="账号名" prop="user_email">
                            <el-input v-model="userForm.user_email" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="用户名" prop="user_name">
                            <el-input v-model="userForm.user_name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="部门" prop="user_dept">
                            <el-input v-model="userForm.user_dept"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="手机号" prop="user_phone">
                            <el-input v-model="userForm.user_phone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="是否接收钉钉推送通知">
                <el-switch
                        v-model="userForm.user_notify"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="是"
                        inactive-text="否" @change="switchChange">
                </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-show = "dingUserDetail">
                    <el-col :xs="18" :sm="16" :md="12" :lg="8" :xl="8">
                        <el-form-item label="钉钉账号信息" >
                            <el-card style="width: 100px;padding: 0px;text-align: center" shadow="hover">
                                <img :src="ding.avatar" style="width: 50px;border-radius: 50px">
                                <span>{{ding.name}}</span>
                            </el-card>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('userForm')">确认</el-button>
                    <a onclick="parent.window.location.reload()">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
    <el-dialog
            title="请扫描二维码验证钉钉账号"
            :visible.sync="dialogVisible"
            width="340px"
            @close="handleClose">
        <div id="login_container" >
        </div>
    </el-dialog>
</div>

</body>

<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
<script>
    var obj = DDLogin({
        id: "login_container", //这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
        goto: "https%3a%2f%2foapi.dingtalk.com%2fconnect%2foauth2%2fsns_authorize%3fappid%3ddingoauw0w9t40ofshd5aw%26response_type%3dcode%26scope%3dsnsapi_login%26state%3dSTATE%26redirect_uri%3dhttp%3a%2f%2f47.110.43.153%3a8080%2fOrder%2fdingMsgController%2fgetUserId.json",
        style: "border:none;background-color:#FFFFFF;",
        width: "300",
        height: "300"
    });</script>
<script>
    var hanndleMessage = function (event) {
        var origin = event.origin;
        console.log("origin", event.origin);
        if (origin == "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。
            var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
            console.log("loginTmpCode", loginTmpCode);
            var msg = "";
            var data = {};
            var bool = false;
            $.ajax({
                url:"${url}/Order/dingMsgController/queryLoginTmpCode.json?loginTmpCode=" +
                loginTmpCode,
                type: "GET",
                async: false,
                dataType: "json",
                success: function (result) {
                    if (result.ret) {
                        bool = true;
                        data = result.data;
                    } else {
                        bool = false;
                        msg = data.msg;
                    }
                }
            });
            if(bool){
                if(data.errcode ==  0){
                    window.app.userForm.user_ding_id = data.userid;
                    window.app.dialogVisible=false;
                    window.app.userForm.user_notify = true;
                    window.app.getUserDetailByDing();
                }else{
                    window.app.$message({
                        message: data.errmsg,
                        type: 'error'
                    });
                }
            }else{
                window.app.$message({
                    message: msg,
                    type: 'error'
                });
            }
        }
    };
    if (typeof window.addEventListener != 'undefined') {
        window.addEventListener('message', hanndleMessage, false);
    } else if (typeof window.attachEvent != 'undefined') {
        window.attachEvent('onmessage', hanndleMessage);
    }
</script>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            //手机格式验证
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
             dialogVisible: false,
                //表单内容
                userForm: {
                    id: '${bean.id}',
                    user_email: "${bean.user_email}",
                    user_name: "${bean.user_name}",
                    user_dept: "${bean.user_dept}",
                    user_phone: "${bean.user_phone}",
                    user_notify:false,
                    user_ding_id:'${userCenterBean.user_ding_id!''}',
                },
                dingUserDetail:false,
                ding:{
                    name:"",
                    avatar:"",
                },
                options: [],
                //表单字段验证项
                rules: {
                    user_email: [{
                        required: true,
                        message: '请填写账号名',
                        trigger: 'blur'
                    }],
                    user_name: [{
                        required: true,
                        message: '请填写姓名',
                        trigger: 'blur'
                    }],
                    user_dept: [{
                        required: true,
                        message: '请填写部门',
                        trigger: 'blur'
                    }],
                    user_phone: [{
                        validator: checkPhone,
                        trigger: 'blur'
                    }],
                },
            }
        },
        methods: {
            getUserDetailByDing(){
                var userDingId = this.userForm.user_ding_id;
                var msg = "";
                var data = {};
                var bool = false;
                $.ajax({
                    url:"${url}/Order/dingMsgController/getUserDetail.json?userId=" +userDingId,
                    type: "GET",
                    async: false,
                    dataType: "json",
                    success: function (result) {
                        console.log(result);
                        if (result.ret) {
                            bool = true;
                            data = result.data;
                        } else {
                            bool = false;
                            msg = data.msg;
                        }
                    }
                });
                if(bool){
                    if(data.errcode ==  0){
                        this.ding.name = data.name;
                        if(data.avatar != ""){
                            this.ding.avatar = data.avatar;
                        }else{
                            this.ding.avatar = "http://pinzafile.oss-cn-shanghai.aliyuncs.com/admin/sale/image/logo.png";
                        }
                        this.dingUserDetail = true;
                    }else{
                        this.$message({
                            message: data.errmsg,
                            type: 'error'
                        });
                    }
                }else{
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                }
            },
            handleClose(){
                if(this.userForm.user_ding_id == ''){
                    this.userForm.user_notify = false;
                }else{
                    this.userForm.user_notify = true;
                }
            },
            switchChange(val){
                if(val){
                    this.dialogVisible=true;
                }else{
                    this.dialogVisible=false;
                }
                this.userForm.user_notify = val;
            },
            submitForm(formName) {
                var tempForm = this.userForm;
                var bool = false;
                this.$refs[formName].validate(async function (valid) {
                    if (valid) {
                        $.ajax({
                            url: '/userCenter/account/update.json',
                            type: 'post',
                            data: tempForm,
                            async: false,
                            dataType: 'json',
                            success: function (result) {
                                if (result.ret) {
                                    bool = true;
                                }
                            }
                        });
                    } else {
                        this.$message({
                            message: '请检查表单内容',
                            type: 'error'
                        });
                        return false;
                    }
                });
                if (bool) {
                   parent.window.location.reload();
                } else {
                    this.$message({
                        message: '系统异常，用户信息修改失败，请重试.',
                        type: 'error'
                    });
                }
            },
        },
        async mounted() {
            var user_notify ='${userCenterBean.user_notify?string("true","false")}';
            this.userForm.user_notify = eval(user_notify.toLowerCase());
            if(this.userForm.user_ding_id != ""){
                this.getUserDetailByDing();
            }
        }
    })
</script>

</html>